<template>
  <div class="buycart">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="tips">
      <ul>
        <li>30天无忧退货</li>
        <li>48小时快速退款</li>
        <li>满68元免邮费</li>
      </ul>
    </div>
    <div class="list">
        <div class="cartItem" v-for="(item,index) in cartList" :key="index">
            <van-checkbox @change="checkEvent($event,item)" v-model="item.checked"></van-checkbox>
            <van-image
                fit='cover'
                width="70"
                height="70"
                :src="item.list_pic_url"
            />
            <div class="proBrief">
                <div class="title">
                    <span>{{item.goods_name}}</span>
                    <span class="num">X{{item.number}}</span>
                    </div>
                <p class="brief">{{item.goods_specifition_name_value}}</p>
                <p class="price">￥ {{item.retail_price}}</p>
            </div>
        </div>
      </div>
      <van-submit-bar
          :price="cartTotal.checkedGoodsAmount*100"
          button-text="提交订单"
          @submit="onSubmit"
          >
          <van-checkbox v-model="checkedAll">全选</van-checkbox>
      </van-submit-bar>
        <!-- 导航栏 -->
    <Navigation></Navigation>
  </div>
</template>

<script>
import Navigation from './Navigation.vue'
import { mapState } from 'vuex'
const mapStateObj = mapState(['cartTotal', 'cartList'])
export default {
  data () {
    return {
      checked: true
    }
  },
  components: {
    Navigation
  },
  computed: {
    ...mapStateObj,
    checkedAll: {
      set (val) {
        console.log(val, '设置全选')
      },
      get () {
        if (this.cartTotal.checkedGoodsCount === this.cartTotal.goodsCount) {
          return true
        } else {
          return false
        }
      }
    }
  },
  created () {
    this.$store.dispatch('AjaxCarList', this)
  },
  mounted () {
    console.log(this.cartList)
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onSubmit () {},
    async checkEvent (event, item) {
      const res = await this.$http.post('cart/checked', { isChecked: Number(event), productIds: item.product_id })
      this.$store.commit('setCarList', res.data.data.cartList)
      this.$store.commit('setCartTotal', res.data.data.cartTotal)
    }
  }
}
</script>

<style lang="less" scoped>
.tips{
  background: #eee;
  padding: .2rem 0;
  ul{
    display: flex;
    justify-content: space-around;
    li{
      font-size: .12rem;
      position: relative;
    }
    li::before{
      content: '';
      position: absolute;
      left: -11px;
      top: 4px;
      width: 4px;
      height: 4px;
      border: 2px solid red;
    }
  }
}
.cartItem{
    padding: 0 5px;
    display: flex;
    align-items: center;
    padding: 10px 5px;
    .van-checkbox{
        margin: 0 5px;
    }
    .van-image{
        background: #efefef;
    }
    .proBrief{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        height: 70px;
        padding: 0 10px;
        .title{
            width: 100%;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
        }
        .brief{
            color: #999;
            font-size: 12px;
        }
    }

}
</style>
